<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script>
      function $(id){
        return document.getElementById(id);
      }
      window.onload = function (){
        findCountry();
      }

     async function findCountry(){
        await axios.get("/country/findAll").then(resp =>{
          var info = resp.data;
          var str = "";
          info.forEach(e =>{
            str += `<option value="${e.id}">${e.name}</option>`;
          });
          $("countrySelect").innerHTML = str;
        });
        findCity();
      }

      function findCity(){
        axios.get("/city/findByCountry",{
          params:{
            countryId : $("countrySelect").value
          }
        }).then(resp =>{
          var info = resp.data;
          var str = "";
          info.forEach(e =>{
            str += `<option>${e.name}</option>`;
          });
          $("citySelect").innerHTML = str;
        })
      }
    </script>
</head>
<body>
    <select id="countrySelect" onchange="findCity()"></select>
    <select id="citySelect"></select>
</body>
</html>